<template>
  <div class="ApplyShop">
    <h2>{{ $t('我要开店') }}</h2>
    <div class="form" v-if="status === 1 || isResubmit">
      <Form ref="form" :model="form" :label-width="100">
        <FormItem :label="$t('店铺类型')" prop="apply_type" :rules="[{ required: true, message: $t('请选择店铺类型'), trigger: 'change' }]">
          <RadioGroup v-model="form.apply_type">
            <Radio label="1">{{ $t('个人身份供货商') }}</Radio>
            <Radio label="2">{{ $t('企业身份供货商') }}</Radio>
          </RadioGroup>
          <div class="tips">{{ $t('选择认证类型后不可更改,请认真选择') }}</div>
        </FormItem>
        <FormItem :label="$t('行业')" prop="indus_id" :rules="[{ required: true, type: 'number', message: $t('请选择行业'), trigger: 'change' }]">
          <Select clearable v-model="form.indus_id" :placeholder="$t('请选择行业')" @on-change="onIndustryresChange">
            <Option
              v-for="(item, index) in industryres"
              :key="index"
              :value="item.id">
              {{ item.industry_name }}
            </Option>
          </Select>
          <span class="tips">{{ $t('当前行业汇率') }}： {{ remind }}‰</span>
        </FormItem>
        <FormItem :label="$t('经营类目')" prop="cate_ids" :rules="[{ required: true, type: 'array', message: $t('请选择经营类目'), trigger: 'change' }]">
          <Select clearable v-model="form.cate_ids" multiple :placeholder="$t('请选择经营类目')">
            <Option
              v-for="item in cateList"
              :key="item.id"
              :value="item.id">
              {{ item.cate_name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('店铺logo')" prop="logo" :rules="[{ required: true, message: $t('请上传店铺logo'), trigger: 'change' }]">
          <div class="uploader">
            <div class="img" style="width: 88px;height:88px;line-height: 88px;" v-if="form.logo">
              <img :src="form.logo" fit="cover" width="88px" height="88px" />
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click="(img = form.logo), visible = true"></Icon>
                <Icon type="ios-trash-outline" @click="(form.logo = ''), logoList = []"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="logoList"
              :on-success="(e, file) => onSuccess(e, file, 'logo')"
              :format="['jpg','jpeg','png']"
              :max-size="4048"
              type="drag"
              :data="formData"
              :action="`${baseURL}api/Common/uploadPic`"
              style="display: inline-block;width:88px;">
              <div style="width: 88px;height:88px;line-height: 88px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem :label="$t('姓名')" prop="contacts" :rules="[{ required: true, message: $t('请输入真实姓名'), trigger: 'blur' }]">
          <Input v-model="form.contacts" :placeholder="$t('请输入真实姓名')"></Input>
        </FormItem>
        <FormItem :label="$t('手机号')" prop="telephone" :rules="[{ required: true, message: $t('请输入手机号'), trigger: 'blur' }]">
          <Input v-model="form.telephone" :placeholder="$t('请输入手机号')"></Input>
        </FormItem>
        <FormItem :label="$t('身份证号')" prop="sfz_num" :rules="[{ required: true, message: $t('请输入身份证号码'), trigger: 'blur' }]">
          <Input v-model="form.sfz_num" :placeholder="$t('请输入身份证号码')"></Input>
        </FormItem>
        <FormItem :label="$t('邮箱')" prop="email" :rules="[{ required: true, message: $t('请输入邮箱'), trigger: 'blur' }]">
          <Input v-model="form.email" :placeholder="$t('请输入邮箱')"></Input>
        </FormItem>
        <FormItem :label="$t('身份证正面')" prop="sfzz_pic" :rules="[{ required: true, message: $t('请上传身份证正面'), trigger: 'change' }]">
          <div class="uploader">
            <div class="img" style="width: 88px;height:88px;line-height: 88px;" v-if="form.sfzz_pic">
              <img :src="form.sfzz_pic" fit="cover" width="88px" height="88px" />
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click="(img = form.sfzz_pic), visible = true"></Icon>
                <Icon type="ios-trash-outline" @click="(form.sfzz_pic = ''), sfzzList = []"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="sfzzList"
              :on-success="(e, file) => onSuccess(e, file, 'sfzz_pic')"
              :format="['jpg','jpeg','png']"
              :max-size="4048"
              type="drag"
              :data="formData"
              :action="`${baseURL}api/Common/uploadPic`"
              style="display: inline-block;width:88px;">
              <div style="width: 88px;height:88px;line-height: 88px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem :label="$t('身份证背面')" prop="sfzb_pic" :rules="[{ required: true, message: $t('请上传身份证背面'), trigger: 'change' }]">
          <div class="uploader">
            <div class="img" style="width: 88px;height:88px;line-height: 88px;" v-if="form.sfzb_pic">
              <img :src="form.sfzb_pic" fit="cover" width="88px" height="88px" />
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click="(img = form.sfzb_pic), visible = true"></Icon>
                <Icon type="ios-trash-outline" @click="(form.sfzb_pic = ''), sfzbList = []"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="sfzbList"
              :on-success="(e, file) => onSuccess(e, file, 'sfzb_pic')"
              :format="['jpg','jpeg','png']"
              :max-size="4048"
              type="drag"
              :data="formData"
              :action="`${baseURL}api/Common/uploadPic`"
              style="display: inline-block;width:88px;">
              <div style="width: 88px;height:88px;line-height: 88px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem :label="$t('手持身份证')" prop="frsfz_pic" :rules="[{ required: true, message: $t('请上传手持身份证'), trigger: 'change' }]">
          <div class="uploader">
            <div class="img" style="width: 88px;height:88px;line-height: 88px;" v-if="form.frsfz_pic">
              <img :src="form.frsfz_pic" fit="cover" width="88px" height="88px" />
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click="(img = form.frsfz_pic), visible = true"></Icon>
                <Icon type="ios-trash-outline" @click="(form.frsfz_pic = ''), frsfzList = []"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="frsfzList"
              :on-success="(e, file) => onSuccess(e, file, 'frsfz_pic')"
              :format="['jpg','jpeg','png']"
              :max-size="4048"
              type="drag"
              :data="formData"
              :action="`${baseURL}api/Common/uploadPic`"
              style="display: inline-block;width:88px;">
              <div style="width: 88px;height:88px;line-height: 88px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem :label="$t('店铺名称')" prop="shop_name" :rules="[{ required: true, message: $t('请输入店铺名称'), trigger: 'blur' }]">
          <Input v-model="form.shop_name" :placeholder="$t('请输入店铺名称')"></Input>
        </FormItem>
        <FormItem :label="$t('店铺描述')" prop="shop_desc" :rules="[{ required: true, message: $t('请输入店铺描述'), trigger: 'blur' }]">
          <Input type="textarea" v-model="form.shop_desc" :placeholder="$t('请输入店铺描述')"></Input>
        </FormItem>
        <FormItem :label="$t('所在省份')" prop="pro_id" :rules="[{ required: true, type: 'number', message: $t('请选择所在省份'), trigger: 'blur' }]">
          <Select clearable v-model="form.pro_id" :placeholder="$t('请选择所在省份')" @on-change="onProviChange">
            <Option
              v-for="item in provinceList"
              :key="item.id"
              :value="item.id">
              {{ item.pro_name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('所在城市')" prop="city_id" :rules="[{ required: true, type: 'number', message: $t('请选择所在城市'), trigger: 'blur' }]">
          <Select clearable v-model="form.city_id" :placeholder="$t('请选择所在城市')" @on-change="onCityChange">
            <Option
              v-for="item in cityList"
              :key="item.id"
              :value="item.id">
              {{ item.city_name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('所在地区')" prop="area_id" :rules="[{ required: true, type: 'number', message: $t('请选择所在地区'), trigger: 'blur' }]">
          <Select clearable v-model="form.area_id" :placeholder="$t('请选择所在地区')">
            <Option
              v-for="item in areaList"
              :key="item.id"
              :value="item.id">
              {{ item.area_name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('详细地址')" prop="address" :rules="[{ required: true, message: $t('请输入详细地址'), trigger: 'blur' }]">
          <Input v-model="form.address" :placeholder="$t('请输入详细地址')"></Input>
        </FormItem>
        <FormItem :label="$t('营业执照')" prop="zhizhao" v-if="form.apply_type === '2'" :rules="[{ required: true, message: $t('请上传营业执照'), trigger: 'change' }]">
          <div class="uploader">
            <div class="img" style="width: 88px;height:88px;line-height: 88px;" v-if="form.zhizhao">
              <img :src="form.zhizhao" fit="cover" width="88px" height="88px" />
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click="(img = form.zhizhao), visible = true"></Icon>
                <Icon type="ios-trash-outline" @click="(form.zhizhao = ''), zhizhaoList = []"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="zhizhaoList"
              :on-success="(e, file) => onSuccess(e, file, 'zhizhao')"
              :format="['jpg','jpeg','png']"
              :max-size="4048"
              type="drag"
              :data="formData"
              :action="`${baseURL}api/Common/uploadPic`"
              style="display: inline-block;width:88px;">
              <div style="width: 88px;height:88px;line-height: 88px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
        </FormItem>
        <FormItem :label="$t('代理商邀请码')" prop="agent_id">
          <Input v-model="form.agent_id" :placeholder="$t('请输入代理商邀请码')"></Input>
        </FormItem>
        <Alert type="warning">{{ $t("1.请认真填写资料,资料提交成功后不可更") }}</Alert>
        <Alert type="warning">{{ $t("2.信息仅用于实名认证,平台保障您的信息安全") }}</Alert>
        <FormItem>
          <Button type="primary" @click="handleSubmit">{{ $t("提交审核") }}</Button>
          <Button @click="handleReset" style="margin-left: 8px">{{ $t("重置") }}</Button>
        </FormItem>
      </Form>
    </div>
    <div class="" v-else>
      <Timeline>
        <TimelineItem v-for="(item, index) in statusList" :key="index" :color="index <= (Number(applys.zhuangtai) - 1) ? '#2d8cf0' : '#aaa'">
          <p class="time" :style="{color: index <= (Number(applys.zhuangtai) - 1) ? '#2d8cf0' : '#aaa'}">{{ item.name }}</p>
          <span style="font-size: 12px;">{{ item.desc }}</span>
        </TimelineItem>
      </Timeline>
      <div v-if="applys.zhuangtai == 6">
        <Alert type="warning">{{ $t('拒绝原因') }}:{{ applys.remarks }}</Alert>
        <Button type="primary" @click="isResubmit = true">{{ $t('重新申请入驻') }}</Button>
      </div>
      <div v-if="applys.zhuangtai == 3 && applys.shop_is_earnest == 1">
        <div class="info-wrapper">
          <div class="info-item">
            <label>{{ $t('您申请的行业为') }}：</label>
            <span>{{ industrys.industry_name }}</span>
          </div>
          <div class="info-item">
            <label>{{ $t('费率') }}：</label>
            <span>{{ industrys.remind / 100 + '%' }}</span>
          </div>
          <div class="info-item">
            <label>{{ $t('缴纳的保证金') }}：</label>
            <span>{{ industrys.ser_price }}</span>
          </div>
        </div>
        <Button type="primary" @click="submitOrder">{{ $t('缴纳保证金') }}</Button>
      </div>
    </div>
    <Modal v-model="visible">
      <img class="prview-img" style="display: block; margin: 0 auto;" :src="img" />
    </Modal>
  </div>
</template>

<script>
  import { SERVERTAPI } from "@/config/index";
  export default {
    name: 'ApplyShop',

    data () {
      return {
        form: {
          cate_ids: [],
          indus_id: '',
          name: '',
          logo: '',
          frsfz_pic: '',
          sfzb_pic: '',
          sfzz_pic: '',
          zhizhao: '',
          apply_type: '1',
          city_id: '',
          pro_id: '',
          area_id: ''
        },
        loading: false,
        sfzzList: [],
        sfzbList: [],
        frsfzList: [],
        logoList: [],
        sfzbList: [],
        baseURL: SERVERTAPI,
        industryres: [],
        cateList: [],
        formData: {},
        img: '',
        status: '',
        visible: false,
        applys: {},
        industrys: {},
        isResubmit: false,
        provinceList: [],
        cityList: [],
        areaList: []
      }
    },

    computed: {
      remind () {
        if (!this.industryres.length || !this.form.indus_id) {
          return ''
        }

        return this.industryres.filter(v => v.id === this.form.indus_id)[0].remind
      },

      statusList () {
        if (!this.applys.zhuangtai) return []

        return [
          {
            status: 1,
            name: this.$t('待审核'),
            desc: this.$t('您提交的入驻申请正在审核中，请耐心等待')
          },
          {
            status: 2,
            name: this.$t('审核已通过'),
            desc: this.$t('您提交的入驻申请已审核通过，请等待签署入驻合同协议')
          },
          {
            status: 3,
            name: this.$t('已签署'),
            desc: this.$t('您的入驻合同协议已签署，请缴纳保证金完成入驻')
          },
          {
            status: 4,
            name: this.$t('已完成待开通'),
            desc: this.$t('您的入驻流程已完成，平台将及时为您开通商家后台，请耐心等待')
          },
          {
            status: 5,
            name: this.$t('已开通'),
            desc: this.$t('您的店铺已开通')
          },
          {
            status: 6,
            name: this.$t('已拒绝'),
            desc: this.$t('提交的商家申请资料被拒绝')
          }
        ].filter((v, index) => {
          if (this.applys.zhuangtai === 6) {
            return index === 0 || index === 4
          } else {
            return index !== 5 
          }
        })
      }
    },

    created () {
      this.formData = this.$http.returnCommonParams('api/Common/uploadPic', 'applyinfo')
      this.getNavList()
      this.getProvince()
    },

    methods: {
      getNavList () {
				this.$http.getruzhuinfo().then(res => {
					if (res.status == 200) {
            this.status = res.data.zhuangtai
            this.industryres = res.data.industryres
						if (res.data.zhuangtai == 1) {
						} else {
              this.getApplystatus()
						}
					}
				})
      },

      onProviChange (e) {
        if (!e) {
          this.areaList = []
          this.cityList = []
          this.form.city_id = ''
          this.form.area_id = ''

          return false
        }

        this.getCityList(e)
      },

      onCityChange (e) {
        if (!e) {
          this.areaList = []
          this.form.area_id = ''

          return false
        }

        this.getAreaList(e)
      },

      getProvince () {
				this.$http.getpro().then(res => {
					if (res.status == 200) {
            this.provinceList = res.data
					}
				})
      },

      getAreaList (city_id) {
				this.$http.getarea({
          city_id
        }).then(res => {
					if (res.status == 200) {
            this.areaList = res.data
					}
				})
      },

      getCityList (pro_id) {
        this.$http.getcity({
          pro_id
        }).then(res => {
          if (res.status == 200) {
            this.cityList = res.data
          }
        })
      },

			submitOrder() {
				this.$http.addApplyPayOrder().then((res) => {
          if (res.status == 200) {
            this.$router.push({
              path: '/Pay',
              query:{
                order_number: res.data.ordernumber,
                zf_type: res.data.zf_type,
                zsprice: res.data.total_price,
                order_status: 'success',
                scene: 'apply'
              }
            })
          }
        })
			},

			getApplystatus() {
				this.$http.getapplystatus().then(res => {
					if (res.status == 200) {
						this.applys = res.data
						this.industrys = res.data.industrys
					}
				})
			},

      onSuccess (e, file, type) {
        if (e.status === 200) {
          file.url = e.data.full_path
          file.name = `logo-${new Date().getTime()}`
          this.form[type] = e.data.full_path
        }
      },

      onIndustryresChange (e) {
        this.form.indus_id = e
        this.cateList = []
        this.form.cate_ids = []
        this.getSortName(e)
      },

			getSortName (id) {
        if (!id && id != 0) return
				this.$http.getcates({
					indus_id: id
				}).then(res => {
					if (res.status == 200) {
						this.cateList = res.data
					}
				})
			},
      
      handleSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http.applyShop({
              ...this.form,
              service_rate: this.remind,
              cate_ids: this.form.cate_ids.join(',')
            }).then(res => {
              if (res.status == 200) {
                this.$Message.success(res.mess)
                setTimeout(() => {
                  this.getNavList()
                  this.getApplystatus()
                  this.isResubmit = false
                }, 1000)
              }
            })
          }
        })
      },

      handleReset () {
        this.$refs.form.resetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ApplyShop {
    & > h2 {
      height: 40px;
      line-height: 40px;
      color: #333;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #ddd;
    }

    .info-wrapper {
      display: flex;
      flex-wrap: wrap;

      .info-item {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 14px;

        label {
          // width: 120px;
          text-align: right;
          color: #666;
        }

        span {
          color: #333;
        }
      }
    }
    .tips {
      line-height: 1;
      font-size: 12px;
      color: #999;
    }

    & > div {
      margin-top: 40px;
    }

    .uploader {
      display: flex;
      align-items: center;

      .img {
        position: relative;
        margin-right: 10px;
        overflow: hidden;

        &:hover {
          .upload-list-cover {
            opacity: 1;
          }
        }
      }

      .upload-list-cover {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        transition: all ease 0.5s;
      }
    }
  }
</style>